<template>
  <div>
    <div class="info">
      <img :src="$pre+info.avatarurl" alt />
      <h2>{{info.nickname}}</h2>
    </div>
    <van-button round block type="warning" native-type="submit" @click="out">退出登录</van-button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters({
      info: "info"
    })
  },
  methods: {
    ...mapActions({
      changeInfo: "changeInfo"
    }),
    out() {
      this.changeInfo({});
      this.$router.replace("/login");
    }
  }
};
</script>

<style scoped>
.info{
    width: 100vw;
    display: flex;
}
.info img{
    width: 30%;
    border-radius: 50%;
}
.info h2{
    width:70%;
    font-size: 1rem;
    text-align: center;
}
.van-button{
    position: absolute;
    bottom: 1.6rem;
}
</style>